<template>
  <h1>HelloWorld</h1>
  <p>
    <!-- router-link是路由跳转组件，用to来指定要跳转的路由 -->
    <router-link to="/demo1">页面一</router-link>
    <br/>
    <router-link to="/demo2">页面二</router-link>
    <br/>
    <router-link to="/user/info/小王/8888">小王</router-link>
    <br/>
    <router-link to="/user/info/小李/6666">小李</router-link>
    <br/>
    <router-link to="/area/details/姑苏区">正测表达式/:注册地区-传递一个参数</router-link>
    <br/>
    <router-link to="/area/details/江苏省/苏州市/姑苏区">正测表达式/:注册地区-传递多个参数</router-link>
    <br/>
    <router-link to="/user/info/1111">正测表达式/:id(\\d+)解决路由冲突</router-link>
    <br/>
    <router-link to="/user/小王/friends/12">路由嵌套</router-link>
    <br/>
    <button @click="toUser">页面导航</button>
    <br/>
    <router-link :to="{name: 'user', params:{username:'小王', id:9999}}">使用to属性</router-link>
    <br/>
    <router-link to="/route/param/5555">路由传参</router-link>
    <br/>
    <router-link to="/route/lifeCycle">路由跳转全过程</router-link>
    <br/>
  </p>
  <!-- router-view是路由的页面出口，路由匹配到的组件会渲染在此 -->
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  methods:{
    toUser(){
      /***
      this.$router.push({
        path:"/user/info/小王/8888"
      })
      ***/
      this.$router.push({
        name:"user",
        params:{
          username:'小王',
          id:777
        }
      })
    /**  .then(()=>{
        this.$message({
          message:"跳转成功",
          type:"success"
        }) 
      }) **/

      /*** 会被处理成 /user/info?usernaem=xixi
      this.$router.push({
        name:"user",
        query:{
          username:'xixi'
        }
      })
      ***/
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
